<template>
  <div class="app-container">
    <el-card shadow="never">
      <el-row :gutter="5">
        <el-col :span="24">
          <el-row class="top-search-row">
            <el-form :inline="true" :model="searchForm">
              <el-form-item label="项目名称">
                <el-input v-model="searchForm.proName" clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="项目分类">
                <el-select v-model="searchForm.proFirstClassUid" clearable placeholder="请选择" @change="changeFirstClass">
                  <el-option v-for="item in firstClassNameList" :key="item.uid" :label="item.proFirstClassName"
                    :value="item.uid">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleFilter" class="search-button">查询</el-button>
                <el-button type="primary" @click="getNames" class="search-button">批量选中</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row>
            <el-card shadow="never" class="tableDiv">
              <el-table :data="tableData" style="width: 100%" v-loading=this.loading @selection-change="selectionChange">
                <el-table-column type="selection" align="center" label="" width=50px></el-table-column>
                <el-table-column align="center" type="index" label="序号" width="55">
                </el-table-column>
                <el-table-column label="项目分类" align="center" prop="proFirstClass">
                </el-table-column>
                <el-table-column label="图片" align="center" prop="fileName">
                  <template slot-scope="{row}">
                    <el-image style="width: 100px; height: 100px" :src="row.picImg" :preview-src-list="[row.picImg]">
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column label="项目名称" align="center" prop="proName">
                </el-table-column>
                <el-table-column label="参考价格（元）" align="center" prop="referencePrice">
                </el-table-column>
              </el-table>
              <div class="pager-box">
                <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageIndex"
                  :limit.sync="searchForm.pageSize" @pagination="getList" />
              </div>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>

import * as MedicalProject from '@/api/MedicalProject'
import * as itemOneClass from '@/api/itemOneClass'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  props: {
    param: {
      type: Object
    }
  },
  data () {
    return {
      loading: false,
      multipleSelection: [],
      userId: "",
      paginator: {
        pageNum: 1,
        displayNum: 10,
        totalNum: 2
      },
      searchForm: {
        pageIndex: 1,
        pageSize: 10
      },
      tableData: [],
      // 单位列表
      selectionData: [],
      firstClassNameList: [],
      form: {},
      total: 0,
    };
  },
  methods: {
    changePage (id) {
      this.getList();

    },
    changePageSize (pageSize) {
      this.paginator.displayNum = pageSize;
      this.changePage(1);
    },
    handleReset () {
      this.resetTemp();
      this.getList();
    },

    resetTemp () {
      this.searchForm = {
        keyWord: ""
      };
      this.paginator.pageNum = 1;
      this.paginator.displayNum = 10;
    },

    handleFilter () {
      this.paginator.pageNum = 1;
      this.getList();
    },
    getList () {
      this.loading = true
      let param = Object.assign({}, this.searchForm)
      MedicalProject.queryByPage(param).then(response => {
        this.tableData = response.data.rows
        this.total = response.data.total
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      }
    },
    getNames () {
      // let materialCodes = []
      // this.selectionData.forEach(item => {
      //   if (!item.num) {
      //     materialCodes.push(item.materialCode + '_' + 0 + '_' + item.materialNum)
      //   } else {
      //     materialCodes.push(item.materialCode + '_' + item.num + '_' + item.materialNum)
      //   }
      // })
      this.$emit('getName', this.selectionData)
    },
    selectionChange (val) {
      this.selectionData = val
    },
    getClassName () {
      itemOneClass.queryByPage({}).then(response => {
        this.firstClassNameList = response.data.rows
      }).catch(error => {
        console.log(error)
      })
    },
    changeFirstClass (e) {
      let proFirstClass = ''
      this.firstClassNameList.some((item) => {
        if (item.uid === e) {
          proFirstClass = item.proFirstClassName
          return true
        }
      });
      if (this.dialogVisible) {
        this.form.proFirstClass = proFirstClass
      }
    },
  },
  mounted () {
    this.getList();
    this.getClassName();
  }
};
</script>

<style scoped lang="scss"></style>
